// 生成左边树
createNav(nav, "nav")

function createNav(data, id) {
	// 组成树
	let _ul = document.createElement("ul")
	data.map(item => {
		let li = document.createElement("li")
		let h2 = document.createElement("h2")
		h2.innerText = item.name
		li.appendChild(h2)
		if (item.title) {
			li.setAttribute("title", item.title)
		}
		_ul.appendChild(li)
		let children = item.children
		children.map(list => {
			let li = document.createElement("li")
			let span = document.createElement("span")
			span.innerText = list.name
			if (list.src) {
				li.setAttribute("src", list.src)
			}
			li.appendChild(span)
			_ul.appendChild(li)
		})
	})
	document.getElementById(id).appendChild(_ul)
	// 设置默认状态
	let lis = document.querySelectorAll("span")
	setActive(lis[0].parentNode)
	// 树点击
	_ul.onclick = function(e) {
		let target = e.target.parentNode
		setActive(target)
	}
}

function setActive(target) {
	let parentNode = target.parentNode
	let src = target.getAttribute("src")
	if (src) {
		// 出去全部类名
		let lis = parentNode.querySelectorAll("li")
		lis.forEach(item => {
			if (item.getAttribute("class")) {
				item.classList.remove("active")
			}
		})
		// 添加类名
		target.classList.add("active")
		setAframe(src, "frame")
	}
}

function setAframe(src, id) {
	let _src = './iframe/' + src + '.html'
	let iframe = document.getElementById(id)
	iframe.src = _src
	setTimeout(() => {
		let child = iframe.contentWindow
		/*
			ace代码编辑器
			没切换一次nav 重新加载一次ace 否则代码高亮及格式 会出问题
		*/ 

		let div = document.querySelector("#editor")
		if(div) {
			document.querySelector('#code').removeChild(div)
		}
		let editorDOM = document.createElement('div')
		editorDOM.id = 'editor'
		document.querySelector('#code').append(editorDOM)
		
		let htmlCode =child.document.querySelector('#my_script').innerHTML
		editorDOM.innerHTML = htmlCode

		// 生成在线编辑器代码显示
		var editor = ace.edit("editor");
			editor.setOptions({
				// 默认:false
				wrap: true, // 换行
				// autoScrollEditorIntoView: false, // 自动滚动编辑器视图
				enableLiveAutocompletion: true, // 智能补全
				enableSnippets: true, // 启用代码段
				enableBasicAutocompletion: true, // 启用基本完成 不推荐使用
			});
			// 设置主题  cobalt monokai
			editor.setTheme("ace/theme/monokai");
			// 设置编辑语言
			editor.getSession().setMode("ace/mode/javascript");
			editor.setFontSize(12);
			editor.setReadOnly(true)
			editor.getSession().setTabSize(2);
	}, 1000)
}